<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        img{
            display: block;
        }
        #lun{
            width: 1500px;
            height: 700px;
            border: 1px solid #CCC;
            margin: 0 auto; 
            margin-top: 120px;
            position: relative;

            cursor: pointer;
        }
        #lun>ul>li{
            position: absolute;
            display: none;
        }
        #lun>ul>li.active{
            display: block;
        }
        #circle-list{
            width: 180px;
            height: 20px;
            background: rgba(255, 255, 255, 0.3);

            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -90px;
            border-radius: 10px;
        }
        #circle-list>ul{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        #circle-list>ul>li{
            width: 12px;
            height: 12px;
            background: #FFF;
            border-radius: 50%;
        }
        #circle-list>ul>li.active-list{
            background: #DB192A;
        }
        #lun>.arrow{
            width: 30px;
            height: 60px;
            background: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: 50%;
            margin-top: -30px;
            font-size: 20px;
            font-family: 楷体;
            font-weight: bold;
            color: #FFF;
            text-align: center;
            line-height: 60px;
            user-select: none;
        }
        #lun>.arrow:hover{
            background: rgba(0, 0, 0, 0.4);
        }
        #lun>#left{
            left: 0;
        }   `
        #lun>#right{
            right: 0;
        }
    </style>
</head>
<body>

<div id="lun">
    <ul>


    <!--      <li class="active"><img src="/images/favicon.png" alt=""></li>
        <li><img src="/images/image/modules.jpg" alt=""></li>
        <li><img src="/images/image/non relational database.png" alt=""></li>
        <li><img src="/images/image/关系型数据库.png" alt=""></li>
        <li><img src="/images/image/聊天室.png" alt=""></li>
        <li><img src="/images/image/冒泡/捕获.png" alt=""></li>
        <li><img src="/images/image/手写识别.png" alt=""></li>
        <li><img src="/images/image/MySQL- B+Tree索引.png" alt=""></li>
        <li><img src="/images/image/MySQL-慢查询配置.png" alt=""></li>
        <li><img src="/images/image/MySQL-B-Tree 索引.png" alt=""></li>

 -->


        <li><img src="../images/posts/sork/641二分查找.jpeg"></li>
        <li><img src="../images/background-cover.jpg" ></li>
        <li><img src="../images/posts/git/git速查表.jpg" ></li>
        <li><img src="../images/posts/sork/快排3.png" ></li>
        <li><img src="../images/posts/sork/冒泡排序.png" ></li>
        <li><img src="../images/posts/sork/快排-指针在两边-子集的划分.png" ></li>
        <li><img src="../images/posts/sork/641-1.png" ></li>
        
        

    </ul>

    <div id="circle-list">
        <ul>
            <li class="active-list"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <div id="left" class="arrow"><</div>
    <div id="right" class="arrow">></div>
</div>
</body>
<script>
    var lun = document.getElementById('lun');
    var circleList = document.getElementById('circle-list');

    var left = document.getElementById('left');
    var right = document.getElementById('right');

    var lis = lun.children[0].children;
    var cLis = circleList.children[0].children;

    var len = lis.length;
    console.log(cLis);
    var index = 0;
    var run;
    function autoRun () {
        run = setInterval(function () {
            lis[index].removeAttribute('class');
            cLis[index].removeAttribute('class');
            index++;
            if (index == lis.length) {
                index = 0;
            }
            lis[index].setAttribute('class', 'active');
            cLis[index].setAttribute('class', 'active-list');
        }, 1000)
    }
    autoRun();
    lun.onmouseenter = function () {
        clearInterval(run);
    }
    lun.onmouseleave = function () {
        autoRun();
    }
    for (var i = 0; i < cLis.length; i++) {
        cLis[i].onmouseover = (function (i) {

            //数据持久化，用闭包==实用 自执行函数
            return function () {
                lis[index].removeAttribute('class');
                cLis[index].removeAttribute('class');
                index = i;
                lis[i].setAttribute('class', 'active');
                cLis[i].setAttribute('class', 'active-list');
            }
        })(i)
    }
    left.onclick = function () {
        lis[index].removeAttribute('class');
        cLis[index].removeAttribute('class');
        index--;
        if (index < 0 ) {
            index = lis.length - 1;
        }
        lis[index].setAttribute('class', 'active');
        cLis[index].setAttribute('class', 'active-list');
    }
    right.onclick = function () {
        lis[index].removeAttribute('class');
        cLis[index].removeAttribute('class');
        index++;
        if (index == lis.length) {
            index = 0;
        }
        lis[index].setAttribute('class', 'active');
        //		// 显示
        cLis[index].setAttribute('class', 'active-list');
    }




</script>
<div>
    熟悉的小脚丫，慢慢走
</div>
</html>